<template>
  <div class="Enter">
    <div class="container">
      <div class="title_search">
        <input type="text" />
        <div><img src="@/assets/image/search_icon.png" alt="" /></div>
      </div>
      <ul class="tap_name">
        <li v-for="(item, index) in tapArr" :key="item.cate_id">
          <a
            href="javascript:;"
            :style="{ color: tapIndex == index ? '#D42454' : '' }"
            @click="tapIndex = index"
            >{{ item.cate_name }}</a
          >
        </li>
      </ul>
      <ul class="top_content">
        <li v-for="(item, index) in tapContent" :key="index">
          <p class="title">{{ item.title }}</p>
          <p class="date">{{ item.date }}</p>
          <p class="bom_box">
            <span :style="{ color: item.hint === '已作答' ? '#D42454' : '' }">{{
              item.hint
            }}</span
            ><a
              href="javascript:;"
              @click="$router.push('/answer?id=' + item.id)"
              >进入答题</a
            >
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tapArr: [],
      tapIndex: 0,
      tapContent: [
        {
          title: "珠江数码员工创新大会培训",
          date: "2020年6月22日",
          hint: "未作答",
        },
        {
          title: "珠江数码员工创新大会培训",
          date: "2020年6月22日",
          hint: "已作答",
        },
        {
          title: "珠江数码员工创新大会培训",
          date: "2020年6月22日",
          hint: "未作答",
        },
        {
          title: "珠江数码员工创新大会培训",
          date: "2020年6月22日",
          hint: "未作答",
        },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.Enter {
  padding: 0.9rem 0rem 3rem;

  .container {
    .title_search {
      width: 85%;
      height: 2.4rem;
      background-color: #fff;
      display: flex;
      justify-content: center;
      border-radius: 0.3rem;
      align-items: center;
      margin: 0 auto;

      input {
        border: 0;
        height: 100%;
        width: 80%;
        outline: 0;
      }
    }

    .tap_name {
      display: flex;
      justify-content: space-between;
      margin: 1rem 0.8rem 2.5rem;
      font-size: 0.95rem;
      color: #fff;
    }

    .top_content {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;

      li {
        height: 7.7rem;
        border-radius: 0.3rem;
        width: 90%;
        background-image: url("../assets/image/cardb_bg.png");
        background-position: center;
        background-size: cover;
        padding: 0.7rem 0.6rem 1rem 1rem;

        .title {
          font-size: 1.2rem;
        }

        .date {
          opacity: 0.51;
        }

        .bom_box {
          margin-top: 0.3rem;
          display: flex;
          justify-content: space-between;

          span {
            color: #999;
            margin-top: 0.8rem;
          }

          a {
            width: 6rem;
            height: 2rem;
            background: #d42454;
            border-radius: 0.2rem;
            color: #fff;
            text-align: center;
            line-height: 1.95rem;
          }
        }
      }

      li:not(:last-child) {
        margin-bottom: 12px;
      }
    }
  }

  @media (max-width: 320px) {
    .container {
      .tap_name {
        font-size: 0.7rem;
      }
    }
  }
}

@media (min-width: 375px) {
  .Enter {
    min-height: 100vh;
  }
}
</style>
